<!--
 * @Author: DeluxePig
 * @LastEditors: DeluxePig 250293786@qq.com
 * @Date: 2024-06-16 13:52:40
 * @LastEditTime: 2024-06-18 00:35:25
 * @Description: 我的关注
-->
<template>
  <div class="my-follow-container">
    <ContralCom @searchFun="searchFun" />
    <div class="page-body">
      <UserCard v-for="item in cardData" :key="item.id" :card-data="item" @delFun="gertFollowData" />
    </div>
    <PaginationCom :pagination-data="pagination" class="h-88" @paginationFun="paginationFun" />
  </div>
</template>

<script>
import { myfollowApi } from '@/api/user'
import ContralCom from '../components/contral'
import UserCard from '../components/folow-card'
import PaginationCom from '@/components/pagination/pagination'
export default {
  components: {
    ContralCom,
    PaginationCom,
    UserCard
  },
  data() {
    return {
      searchVal: '',
      pagination: {
        currentPage: 1,
        pageSize: 1000,
        total: 0
      },
      saveAllData: [],
      cardData: [
        // {
        //   'id': 5,
        //   'users_uniqueid': 'n6mbo00lqb0d0djwg4dx5bnuc3npmgqr',
        //   'link_users_uniqueid': '3d35138060d5423c8a407db148bb4209',
        //   'create_datetime': '2024-05-29 15:29:41',
        //   'update_datetime': '2024-05-29 15:29:41',
        //   'follow_user_info': { // 关注人信息
        //     'users_uniqueid': '3d35138060d5423c8a407db148bb4209',
        //     'real_name': '--',
        //     'icon': '',
        //     'unit_name': '',
        //     'unit_logo': '',
        //     'unit_department': '',
        //     'unit_title': '',
        //     'unit_job': '',
        //     'intro': '',
        //     'create_datetime': '2024-05-29 15:31:27',
        //     'update_datetime': '2024-05-29 15:31:27'
        //   }
        // }
      ]
    }
  },
  created() {
    this.gertFollowData()
  },
  methods: {
    searchFun(val) {
      this.searchVal = val
      this.gertFollowData()
    },
    paginationFun(val) {
      this.pagination = val
      this.setData()
    },
    gertFollowData() {
      const data = {
        key: this.searchVal
      }
      myfollowApi(data).then((res) => {
        this.saveAllData = res.data
        this.pagination.total = res.data.length
        this.setData()
      })
    },
    setData() {
      const e = this.pagination.currentPage * this.pagination.pageSize
      const s = e - this.pagination.pageSize
      this.cardData = this.saveAllData.slice(s, e)
    }
  }
}
</script>
<style lang="scss" scoped>
.my-follow-container {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 20px 30px;

  .page-body {
    width: 100%;
    height: calc(100% - 100px);
    padding: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-y: auto;
    flex-wrap: wrap;
  }
}
</style>
